<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜗牛商城后台管理系统</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 导航栏 -->
	<jsp:include page="navbar.jsp"></jsp:include>
	<!-- 数据展示 -->
	<div class="col-md-10 text-center panel" id="view">
		<!-- 面板标题 -->
		<div class="panel-heading text-left">
			<a href="javascript:void(0)">修改昵称</a>
		</div>
		<!-- 面板主体 -->
		<div class="panel-body">
			<!-- 表单 -->
			<form class="form form-horizontal  col-md-push-1 col-md-10 ">
				<!-- 用户昵称 -->
				<div class="form-group ">
					<!-- 说明 -->
					<div class="col-md-2 text-right">
						<label for="uname">用户昵称：</label>
					</div>
					<!-- 输入框 -->
					<div class="col-md-4">
						<input type="text" name="uname" id="uname" onblur="checkUname()"
							placeholder="请输入您的新昵称" class="form-control"
							value="${loginUser.uname}" />
					</div>
					<!-- 提示信息 -->
					<div class="col-md-6 text-left">
						<span id="unameMsg">&nbsp;</span>
					</div>
				</div>
				<!-- 按钮 -->
				<div class="form-group col-md-6">
					<button type="button" class="btn btn-mk btn-success"
						onclick="updateUname()">保存</button>
					<button type="reset" class="btn btn-mk btn-warning">重置</button>
				</div>
			</form>
		</div>
	</div>
	<!-- 版权 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	//修改昵称
	function updateUname() {
		if (checkUname()) {
			$.ajax({
				url : "../user",
				type : "post",
				data : {
					"opr" : "updateUname",
					"uname" : $("#uname").val()
				},
				dataType : "json",
				success : function(result) {
					if (result.msg == "ok") {
						alert("昵称修改成功");
						location.href = "welcome.jsp";
					} else if (result.msg == "null") {
						alert("请重新登录！");
						location.href = "login.jsp";
					} else {
						alert(result.msg);
					}
				}
			})
		}
	}

	//检查新昵称格式是否正确
	function checkUname() {
		let zz = /^[a-zA-Z0-9\u4e00-\u9fa5]{4,10}$/;
		let unameVal = $("#uname").val();
		if (zz.test(unameVal)) {
			$("#unameMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#unameMsg").html("<font color='red'>昵称由字母、数字和汉字组成，长度必须在4-10位之间。</font>");
			return false;
		}
	}
</script>
</html>
